<template>
  <div class="purchase-order-detail-inquire-container page-main">
    <query-page
      ref="orderDetailRef"
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      :total="total"
      :has-line="false"
      title="采购订单明细查询"
      @selection-change="selectionChange"
      @query-data="getData"
    >
      <template #top-container>
        <p-tabs
          v-model:value="activeTab"
          :is-show-num="false"
          :tab-list="materialType"
          style="margin: 0 0 8px"
        />
      </template>
      <template #container-side>
        <a-button v-permission="['pms:order-detail:export']" @click="allExport"
          >导出</a-button
        >
      </template>
    </query-page>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, watch } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import { downFileToExcel } from '@/common/utils/downFile';
  import {
    formRenderConfig,
    formComponentConfig,
  } from '@/views/purchase-order/components/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '@/views/purchase-order/components/tableComp/baseTableConfig';
  import {
    getPmsOrderDetailPage,
    delOrderDetailExport,
  } from '@/api/purchase-order/purchaseOrderPreparation';
  import { materialType } from '@/config/const';
  import { Message } from '@arco-design/web-vue';
  // import dayjs from 'dayjs';
  import { baseRenderData } from './baseRenderData';
  import PTabs from '../components/p-tabs.vue';

  const selectedKeys = ref([]);
  const activeTab = ref('');
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const total = ref(0);
  const orderDetailRef = ref();
  // 渲染检索项
  const formRenderKeys = ref<any[]>([]);
  // 当前表格要渲染哪些值
  const tableRenderKeys = ref<any[]>([]);

  const getData = async (queryInfo: object) => {
    renderData.value = [];
    isLoading.value = true;
    const param: any = { ...queryInfo };
    param.mdsItemType = activeTab.value ? Number(activeTab.value) : 2;
    console.log('queryInfo', param, activeTab.value);
    const res: any = await getPmsOrderDetailPage(param);
    if (res.code === 200) {
      total.value = res.data.total;
      renderData.value = [...res.data.list];
    }
    isLoading.value = false;
  };
  const selectionChange = (val: string[]) => {
    console.log('selectedKeys', val);
  };

  // 初期话
  const initData = () => {
    // 获取列表的renderKey(列表渲染项)
    tableRenderKeys.value = [
      ...baseRenderData.tableRenderKeys[activeTab.value],
    ];
    // 获取筛选form的renderKey(表单渲染项)
    formRenderKeys.value = [...baseRenderData.formRenderKeys[activeTab.value]];
  };
  watch(activeTab, () => {
    initData();
    getData(orderDetailRef.value.getStatus());
  });
  const allExport = async () => {
    const params = orderDetailRef.value.getStatus();
    const temp = {
      mdsItemType: activeTab.value ? Number(activeTab.value) : 2,
      ...params,
    };
    delete temp.pageNo;
    delete temp.pageSize;

    try {
      const { data, fileName } = (await delOrderDetailExport(temp)) as any;

      downFileToExcel(fileName, data);
    } catch (error) {
      Message.error('导出失败！');
    }
  };
  onMounted(() => {
    activeTab.value = '2';
    initData();
  });
</script>

<style lang="less" scoped>
  .purchase-order-detail-inquire-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 125px);
    overflow: hidden;

    :deep(.page-title) {
      padding-bottom: 6px !important;
    }
  }
</style>
